<template>
	<view class="index">
		<u-navbar :border-bottom="false" title="小鹭搜课" :is-back="false"></u-navbar>
		<view class="noticeBar acea-row row-middle" @click="common.go('/pages/index/notice')">
			<view class="left acea-row row-middle">
				<image src="../../static/images/index-bar.png" mode=""></image>
				<text>待办</text>
			</view>
			<view class="right">
				<u-notice-bar class="rightNotice" color="#646A73" :more-icon="true" :autoplay="true" mode="vertical" type="none" :volume-icon="false" :list="barList"></u-notice-bar>
			</view>
		</view>
		<view ref="demo" class="part01 acea-row row-column" @click="common.go('/pages/pack/class/classRecord')">
			<text class="text01">课表排课</text>
			<text class="text02">提前了解课表课程</text>
			<!-- <view class="btn">查看日历</view> -->
			<view class="right acea-row row-column row-middle">
				<text>{{relClassDate.length}}</text>
				<text>今日课程</text>
			</view>
		</view>
		<view class="part02">
			<u-grid :col="4" :border="false">
				<u-grid-item @click="common.go('/pages/index/studentList')">
					<u-badge v-show="LTcount>0" :count="LTcount" :offset="[20, 20]"></u-badge>
					<image class="icon" src="../../static/images/index-grid-01.png" mode=""></image>
					<view class="grid-text">学员</view>
				</u-grid-item>
				<u-grid-item @click="common.go('/pages/class/classList')">
					<image class="icon" src="../../static/images/index-grid-02.png" mode=""></image>
					<view class="grid-text">班级</view>
				</u-grid-item>
				<u-grid-item @click="common.go('/pages/pack/class/classRecord')">
					<image class="icon" src="../../static/images/index-grid-03.png" mode=""></image>
					<view class="grid-text">课程</view>
				</u-grid-item>
				<u-grid-item @click="common.go('/pages/pack/index/homework')">
					<image class="icon" src="../../static/images/index-grid-04.png" mode=""></image>
					<view class="grid-text">作业</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view style="width: 690rpx;margin: 24rpx auto 0;" v-if="config.activity.activity1.enable" @click="common.go('/pages/pack/huodong/huodong')">
			<image style="width: 690rpx;max-height: 125px;" :src="config.activity.activity1.image" mode="widthFix"></image>
		</view>
		<view class="part03">
			<view class="title">今日课程提醒</view>
			<view class="container">
				<u-tabs class="tabList" :show-bar="false" :list="tabList" :active-item-style="tabActiveStyle" height="48" font-size="28" :current="tabCurrent" @change="changeTab"></u-tabs>
				<view class="list" v-if="classData.length != 0">
					<view class="item acea-row row-column" v-for="(item,index) in classData" :key="index" @click="common.go('/pages/pack/index/setHomework')">
						<text class="time">{{item.start_date}}</text>
						<text class="time1">{{item.timefrom}} - {{item.timeto}}</text>
						<text class="className">{{item.jsname}}</text>
						<view class="footer acea-row row-middle row-between">
							<text>写点评/作业</text>
							<u-icon name="arrow-right" color="#8f959e" size="32"></u-icon>
						</view>
						<view class="right acea-row row-column">
							<text>{{item.stu_num?item.stu_num:0}}人</text>
							<text>{{item.bjname}}</text>
						</view>
						<view class="tag" :class="item.state==1||item.state==2?'noStart':'over'">{{item.state | changeState}}</view>
					</view>
				</view>
				<view class="listEmpty" v-else>辛苦了，今天暂无课程安排</view>
			</view>
		</view>
		<view class="commonFooter"></view>
		<!-- <view class="huodong" v-if="config.activity.activity1.enable" style="position: absolute;right: 20rpx;bottom: 200rpx;" @click="common.go('/pages/pack/huodong/huodong')">
			<image :src="config.activity.activity1.image" mode="" style="width: 150rpx;height: 150rpx;"></image>
		</view> -->
	</view>
</template>

<script>
	import common from '../../api/common.js'
	import request from '../../api/request.js'
	const app = getApp();
	export default {
		data() {
			return {
				config:app.globalData.config,
				common,
				relClassDate:[],
				classData:[],
				barList:['暂无待办事宜'],
				tabList:[
					{
						name: '全部'
					},{
						name: '未开课'
					}, {
						name: '进行中'
					}, {
						name: '已结课',
					}
				],
				tabCurrent:0,
				tabActiveStyle:{
					background: "#e6f2ff",
					borderRadius: "30rpx",
					color: "#1661ff"
				},
				LTcount:0,// 聊天消息数
			}
		},
		created() {
			// this.init()
		},
		onHide() {
			this.tabCurrent = 0
			this.changeTab(0)
		},
		onShow() {
			this.init()
		},
		methods: {
			init(){
				this.barList = ['暂无待办事宜']
				this.getClassData()
				this.watchUnReadList()
				this.watchConfig()
			},
			watchUnReadList(){
				// 监听unReadList变化
				const self = this;
				let setCount = (e)=>{
					let count = 0;
					for(let i of e){
						count = count + i.unread
					}
					self.LTcount = count
				}
				setCount(app.globalData.unReadList)
				app.globalData.watchUnReadList(app,(e)=>{
					setCount(e)
				})
			},
			watchConfig(){
				const self = this;
				app.globalData.watchConfig(app,(e)=>{
					console.log('watchConfig',e)
					self.config = e
				})
			},
			getTongzhi(){
				let data = {
					page:1,
					status:1
				}
				request.go((e)=>{
					let barList = []
					if(e.data.length != 0){
						for(let i of e.data){
							barList.push(i.title)
						}
						this.barList = barList
					}
				},'/tongzhi',data,'POST')
			},
			getClassData(){
				request.go((e)=>{
					this.classData = e.data
					this.relClassDate = e.data
					this.getTongzhi()
				},'/kecheng',{},'POST')
			},
			changeTab(e){
				let relClassDate = JSON.parse(JSON.stringify(this.relClassDate))
				if(e != 0){
					let f = this.relClassDate.filter(o=>o.state == e)
					this.classData = f
				}else{
					this.classData = relClassDate
				}
				this.tabCurrent = e
			}
		},
		filters:{
			changeState(e){
				switch(e){
					case 1:
						return "未开课"
					break;
					case 2:
						return "上课中"
					break;
					case 3:
						return "已结课"
					break;
				}
			}
		}
	}
</script>

<style scoped>
	.index{
		min-height: 100vh;
		background: linear-gradient(180deg,#ffffff, #f7f8fa 50%);
		position: relative;
	}
	.noticeBar{
		width: 698rpx;
		height: 80rpx;
		background: #f7f8fa;
		border-radius: 80rpx !important;
		margin: 32rpx auto 0;
		padding: 0 0 0 32rpx;
		box-sizing: border-box;
	}
	.noticeBar .left{
		width: 128rpx;
		height: 100%;
		position: relative;
	}
	.noticeBar .left::after{
		content: " ";
		width: 2rpx;
		height: 24rpx;
		background-color: #C0C4CC;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
	}
	.noticeBar .left image{
		width: 32rpx;
		height: 32rpx;
	}
	.noticeBar .left  text{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1f2329;
		margin-left: 16rpx;
		line-height: 28rpx;
	}
	.noticeBar .right{
		flex: 1;
		height: 100%;
		overflow: hidden;
		position: relative;
	}
	.noticeBar .right .rightNotice{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		width: 100%;
	}
	.part01{
		padding: 48rpx;
		box-sizing: border-box;
		width: 686rpx;
		/* height: 292rpx; */
		border-radius: 32rpx;
		background-image: url(../../static/images/index-part01-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		margin: 48rpx auto 0;
		flex-wrap: nowrap;
		position: relative;
	}
	.part01 .text01{
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #ffffff;
		line-height: 52rpx;
	}
	.part01 .text02{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		line-height: 40rpx;
		margin-top: 8rpx;
	}
	.part01 .btn{
		width: 160rpx;
		height: 56rpx;
		border: 2rpx solid #ffffff;
		border-radius: 34rpx;
		line-height: 56rpx;
		text-align: center;
		color: #ffffff;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 48rpx;
		box-sizing: content-box;
	}
	.part01 .right{
		position: absolute;
		top: 38rpx;
		right: 64rpx;
	}
	.part01 .right text:nth-child(1){
		font-size: 64rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 60rpx;
	}
	.part01 .right text:nth-child(2){
		font-size: 28rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 40rpx;
		margin-top: 16rpx;
	}
	.part02{
		width: 686rpx;
		height: 186rpx;
		margin: 32rpx auto 0;
		background-color: #FFFFFF;
		border-radius: 32rpx;
		/* box-shadow: 0rpx 0rpx 12rpx -2rpx rgba(0,0,0,0.1); */
	}
	.part02 >>> .u-grid-item{
		background: transparent !important;
	}
	.part02 .icon{
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 16rpx;
	}
	.part03{
		box-sizing: border-box;
		padding: 0 32rpx;
		margin-top: 48rpx;
	}
	.part03 .title{
		font-size: 36rpx;
		font-weight: 500;
		color: #1f2329;
		line-height: 52rpx;
		margin-bottom: 32rpx;
	}
	.part03 .container .tabList >>> .u-tabs{
		background: none !important;
	}
	.part03 .container .tabList >>> .u-tab-item{
		border-radius: 30rpx;
	}
	.part03 .container .item{
		margin-top: 32rpx;
		width: 686rpx;
		height: 334rpx;
		background: #ffffff;
		border-radius: 32rpx;
		box-sizing: border-box;
		padding: 32rpx 32rpx 0 32rpx;
		position: relative;
	}
	.part03 .container .item .time{
		font-size: 24rpx;
		font-weight: 400;
		color: #8f959e;
		line-height: 32rpx;
	}
	.part03 .container .item .time1{
		font-size: 48rpx;
		font-weight: 700;
		color: #1f2329;
		line-height: 48rpx;
		margin-top: 16rpx;
	}
	.part03 .container .item .className{
		margin-top: 48rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #646a73;
		line-height: 36rpx;
	}
	.part03 .container .item .footer{
		position: absolute;
		width: calc(100% - 64rpx);
		height: 86rpx;
		bottom: 0;
		left: 32rpx;
		border-top: 2rpx solid #ebedf0;
	}
	.part03 .container .item .footer text{
		font-size: 28rpx;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	.part03 .container .item .right{
		position: absolute;
		right: 138rpx;
		top: 90rpx;
		width: 136rpx;
	}
	.part03 .container .item .right text:nth-child(1){
		font-size: 40rpx;
		font-weight: 500;
		color: #1f2329;
		line-height: 40rpx;
		white-space: nowrap;
	}
	.part03 .container .item .right text:nth-child(2){
		font-size: 26rpx;
		font-weight: 400;
		color: #646a73;
		line-height: 36rpx;
		margin-top: 48rpx;
		white-space: nowrap;
	}
	.part03 .container .item .tag{
		width: 82rpx;
		height: 38rpx;
		line-height: 38rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		border-radius: 8rpx;
		text-align: center;
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	.part03 .container .item .tag.noStart{
		background: #e6f2ff;
		color: #1661ff;
	}
	.part03 .container .item .tag.over{
		background: #f7f8fa;
		color: #8f959e;
	}
	.part03 .container .listEmpty{
		width: 686rpx;
		height: 334rpx;
		background: #ffffff;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #c0c4cc;
		line-height: 334rpx;
		text-align: center;
		margin: 36rpx auto 0;
	}
</style>
